import React, { useEffect, useState } from 'react'
import request from '../../api/request'
import MyNavbar from '../../components/MyNavbar'
import { Tabs } from 'antd-mobile'
import styles from './css/index.module.css'
import dayjs from 'dayjs'
import { useNavigate } from 'react-router-dom'

function Index() {
  const [data,setData]=useState([])
  const [departmentId,setDepartmentId]=useState(7)
  const [page,setPage]=useState(1)
  const [count,setCount]=useState(10)

  const [title,setTitle]=useState([])
  const navigate=useNavigate()

  // 转换时间戳为年月日时分秒
  useEffect(()=>{
    request.get('/share/knowledgeBase/v1/findDepartment').then((res)=>{
      console.log(res);
      setTitle(res.data.result)  
    })
  },[])


  useEffect(()=>{
    request.get('/user/sickCircle/v1/findSickCircleList',{
      params:{
        departmentId:departmentId,
        page:page,
        count:count
      }
    }).then((res)=>{
      console.log(res);
      setData(res.data.result)
    })
  },[departmentId,page,count])

  return (
    <div className={styles.box}>
      <MyNavbar />
       <Tabs activeLineMode={false} onChange={setDepartmentId}>
        {
          title.map((item)=>{
            return <Tabs.Tab title={item.departmentName} key={item.id}></Tabs.Tab>
          })
        }
        </Tabs>
        <div>
          {data.map((item)=>{
            return <div key={item.sickCircleId} className={styles.content} onClick={()=>navigate(`/momentsDetail/${item.sickCircleId}`)}>
                    <p className={styles.title}>{item.title}</p>
                    <p style={{color:'#999'}}>{dayjs(item.releaseTime).format('YYYY-MM-DD hh:mm:ss')}</p>
                    <p>{item.detail}</p>
                    <p className={styles.pl}>
                      <span>收藏 {item.collectionNum}</span>&emsp;
                      <span>建议 {item.commentNum}</span>
                    </p>
                </div>
              })}
        </div>
    </div>
  )
}

export default Index
